<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .carousel {
    width: 100%;
    height: 200px;
    position: relative;
    display: flex;
    justify-content: center;
    transform-style: preserve-3d;
    perspective:1200px; /*在父元素中加景深属性*/
  }

  .carousel-item {
    width: 300px;
    height: 200px;
    position: absolute;
    transition: all .5s;
  }

  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

<body>
  <div class="carousel">
    <div class="carousel-item"><img src="./image//nature-1.jpg" alt=""></div>
    <div class="carousel-item"><img src="./image//nature-2.jpg" alt=""></div>
    <div class="carousel-item"><img src="./image//nature-3.jpg" alt=""></div>
    <div class="carousel-item"><img src="./image//nature-4.jpg" alt=""></div>
    <div class="carousel-item"><img src="./image//nature-5.jpg" alt=""></div>
  </div>
</body>
<script>
  const items = document.querySelectorAll('.carousel-item')
  let index = 2

  function layout() {
    const xOffsetStep = 60     // 每个图片之间的偏移量
    const count = items.length // 轮播图的数量
    const scleStep = 0.6   //  缩放倍率
    const opacityStep = 0.5
    for (let i = 0; i < items.length; i++) {
      const sign = Math.sign(i - index)
      const item = items[i]
      let xOffset = (i - index) * xOffsetStep
      if (i !== index) {
        xOffset = xOffset + 100 * sign
      }
      const scale = scleStep ** Math.abs(i - index)
      const opacity = opacityStep ** Math.abs(i - index)
      const rotateY = i == index ? 0 : 45 * -sign
      item.style.transform = `translateX(${xOffset}px) scale(${scale}) rotateY(${rotateY}deg)`
      item.style.zIndex = count - Math.abs(index - i)
      item.style.opacity = opacity
    }
  }
  layout()

  items.forEach((item, i) => {
    item.addEventListener('click', function () {
      index = i
      layout()
    })
  })
</script>

</html>